<!--eslint-disable-->
<template>
    <div class="date-picker">
      <input
        type="text"
        class="date-input"
        v-model="selectedDate"
        @click="showCalendar = !showCalendar"
        placeholder="选择日期"
      />
      <div class="calendar" v-if="showCalendar">
        <div class="calendar-header">
          <button @click="previousMonth">&lt;</button>
          <span>{{ this.currentMonth }}</span>
          <button @click="nextMonth">&gt;</button>
        </div>
        <table>
          <thead>
            <tr>
              <th v-for="day in daysOfWeek" :key="day">{{ day }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="week in calendar" :key="week">
              <td
                v-for="date in week"
                :key="date.value"
                :class="{ 'selected': isDateSelected(date) }"
                @click="selectDate(date)"
              >
                {{ date.value }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
<script>
/* eslint-disable */
  export default {
    data() {
      return {
        selectedDate: '',
        showCalendar: false,
        currentDate: new Date(),
        currentMonth: '',
      };
    },
    created(){
        this.fetchMonth();
        this.currentD();
    }
    ,
    computed: {
      daysOfWeek() {
        return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
      },
      calendar() {
        const year = this.currentDate.getFullYear();
        const month = this.currentDate.getMonth();
        const firstDayOfMonth = new Date(year, month, 1).getDay();
        const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
  
        const calendar = [];
        let week = [];
        for (let i = 0; i < firstDayOfMonth; i++) {
          week.push({ value: '' });
        }
  
        for (let day = 1; day <= lastDateOfMonth; day++) {
          week.push({ value: day });
          if (week.length === 7) {
            calendar.push(week);
            week = [];
          }
        }
  
        if (week.length > 0) {
          calendar.push(week);
        }
  
        return calendar;
      },
    },
    methods: {
        currentD() {
            let yy = String(this.currentDate.getFullYear())  
		    let mm = this.currentDate.getMonth() + 1 
            let dd = String(this.currentDate.getDate() < 10 ? '0' + this.currentDate.getDate() : this.currentDate.getDate())  
            this.selectedDate = new Date(yy, mm, dd).toISOString().slice(0, 10);
        },
        fetchMonth() {
            let yy = String(this.currentDate.getFullYear())  
		    let mm = this.currentDate.getMonth() + 1  
            this.currentMonth = yy + '年' + mm + '月';
        },
      nextMonth() {
        this.currentDate.setMonth(this.currentDate.getMonth() + 1);
        this.fetchMonth();
      },
      previousMonth() {
        this.currentDate.setMonth(this.currentDate.getMonth() - 1);
        this.fetchMonth();
      },
      isDateSelected(date) {
        const selectedDate = new Date(this.selectedDate);
        return (
          date.value !== '' &&
          date.value === selectedDate.getDate() &&
          this.currentDate.getMonth() === selectedDate.getMonth() &&
          this.currentDate.getFullYear() === selectedDate.getFullYear()
        );
      },
      selectDate(date) {
        if (date.value !== '') {
          const year = this.currentDate.getFullYear();
          const month = this.currentDate.getMonth();
          this.selectedDate = new Date(year, month, date.value).toISOString().slice(0, 10);
          this.showCalendar = false;
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .date-picker {
    position: absolute;
    display: block;
    font-family: Arial, sans-serif;
    width: 100%;
    right: 0px;
  }
  
  .date-input {
    position: absolute;
    display: block;
    right: 0px;
    height: 40px;
    background-color: rgba(1, 1, 1, 0);
    border: 0px solid red ;
    border-radius: 1px;
    cursor: pointer;
    text-align: right;
    font-family:'Times New Roman', Times, serif;
    font-size: 30px;
    color: white;
    width: 100%;
  }
  
  .calendar {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 1;
    display: block;
  }
  
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .calendar-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    outline: none;
  }
  
  .calendar table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .calendar th,
  .calendar td {
    text-align: center;
    padding: 5px;
    border: 1px solid #ccc;
  }
  
  .calendar td:hover {
    background-color: #f0f0f0;
    cursor: pointer;
  }
  
  .calendar .selected {
    background-color: #007bff;
    color: #fff;
  }
  </style>
  